<template>
  <!-- 在线咨询 -->
  <div class="online_body">
    <div class="online_body_con">
      <div class="online_body_block">
        <label for="title">标题</label>
        <input
          id="title"
          placeholder="请输入标题"
          type="text"
          v-model="title"
        />
      </div>
      <div class="online_body_block">
        <label for="content">咨询内容</label>
        <textarea
          id="content"
          placeholder="请输入咨询内容"
          v-model="content"
        ></textarea>
      </div>
      <div class="online_body_block">
        <label for="search">搜索专家</label>
        <div style="display:flex;justify-items: center;align-items: center;">
          <input
            id="search"
            placeholder="请输入专家的名字"
            v-model="searchinput"
            type="text"
          />
          <i class="search" @click="searchvalue()"></i>
        </div>
        <ul>
          <li v-for="(item, i) in expertList" :key="i" style="display:flex;">
            <input
              type="checkbox"
              :data-id="item.id"
              class="check_expert"
              :id="'expert_' + i + 1"
              style="position:relative;top:8px;"
            />
            <label style="cursor:pointer" :for="'expert_' + i + 1">{{
              item.nickName
            }}</label>
          </li>
        </ul>
      </div>
      <div
        class="online_body_block"
        style="display:flex;justify-items: center;align-items: center;"
      >
        <input id="limit" type="checkbox" @change="select" />
        <label for="limit">只给选中的专家看</label>
      </div>
      <div class="online_body_block">
        <button @click="sendProblem">发表咨询</button>
      </div>
      <div class="history_body_block">
        <button
          class="history_btn"
          @click="$router.push({ name: 'OnlineSeek' })"
          v-if="$route.name != 'OnlineSeek'"
        >
          历史资讯
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: null,
      content: null,
      public: 0,
      expert: "",
      expertList: [],
      searchinput: ""
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    async getdata() {
      if (sessionStorage.getItem('experts')) {
        this.expertList = JSON.parse(sessionStorage.getItem('experts'))
      }else{
        await this.$axios.get("api/user/list").then(({ data }) => {
          // console.log(data.rows);
          this.expertList = data.rows;
          var data1 = JSON.stringify(data.rows);
          sessionStorage.setItem('experts',data1)
        });
      }
    },
    select(e) {
      let mCheck = e.target.checked;
      this.public = mCheck ? 1 : 0;
      if (mCheck) {
        Array.from(document.getElementsByClassName("check_expert")).forEach(
          element => {
            if (element.checked) {
              this.expert += element.dataset.id + ",";
            }
          }
        );
        this.expert = this.expert.substring(0, this.expert.length - 1);
        console.log(this.expert);
      } else {
        this.expert = "";
      }
    },
    sendProblem() {
      // {
      //     isPrivate: this.public,
      //     expertId: this.expert,
      //     userId: this.$cookie.getCookie("id"),
      //     title: this.title,
      //     content: this.content
      //   }
      this.$axios
        .post(
          "api/problem/add",
          `isPrivate=${this.public}&expertId=${
            this.expert
          }&userId=${this.$cookie.getCookie("id")}&title=${
            this.title
          }&content=${this.content}`
        )
        .then(data => {
          if (data.data.code === 200) {
            this.$msgBox.show(data.data.msg, "success", 250, 60);
            window.history.go(-1);
          } else {
            this.$msgBox.show(data.data.msg, "error", 250, 60);
          }
        });
    },
    searchvalue() {
      this.getdata()
      // console.log("ss");
      let arr = [];
      if (this.searchinput) {
        // this.getdata();
        // console.log("执行了");
        arr = this.expertList.filter(data => {
          return data.nickName.indexOf(this.searchinput) !== -1;
        });
      } else {
        arr = this.expertList;
      }
      this.expertList.length = arr.length;
      this.expertList = arr;
    }
  },
  watch: {
    searchinput(value, oldValue) {
      // console.log(
      //  JSON.parse(sessionStorage.getItem('experts'))
      // );
      // console.log(value, oldValue);
      // if (value!==oldValue) {
        //   this.getdata()
      // let timer;
      // if (timer) clearTimeout(timer);
      // timer = setTimeout(() => {
        this.searchvalue();
        // 暂时理解不了（this，arguments）指向改变的问题
        // foo.call(this,arguments)
        // 不输入延迟 则默认 1000 ms
      // }, 1000);

      // }else{

      // }
      // if (value) {
      // }else if(value==""){
      // }
    },
    deep: true,
    immediate: true
  },
  destroyed() {
    sessionStorage.removeItem('experts');
  },
};
</script>

<style scoped>
input[type="checkbox"] {
  width: 18px;
  height: 18px;
}
button {
  border: none;
  padding: 10px;
  width: 100%;
  background-color: var(--success);
  color: #fff;
  border-radius: 5px;
  border-color: var(--success);
  outline-color: var(--success);
}
.online_body {
  max-width: 1000px;
  margin: auto;
  /* background-color: #f5f5f5; */
  min-height: var(--globalHeight);
}
.online_body_con {
  height: 100%;
  padding: 10px;
}
.online_body_con label {
  display: block;
  font-size: 15px;
  font-weight: bold;
  margin: 8px 0;
  /* border-left: 5px solid purple; */
}
.online_body_con input[type="text"],
textarea {
  padding: 10px;
  border: 1px solid #e0e0e0;
  box-sizing: border-box;
  border-radius: 5px;
  width: 100%;
  resize: none;
  font-size: 15px;
}
.online_body_con textarea {
  font-family: "微软雅黑";
  height: 200px;
}
.online_body_con input[type="text"],
textarea:focus {
  outline-color: skyblue;
}
.online_body_block {
  position: relative;
}
.online_body_block ul {
  background-color: #fff;
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 150px;
  overflow-y: scroll;
}
.online_body_block ul li {
  padding: 10px;
  padding-left: 32px;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
  transition: background 1s;
}
.online_body_block ul li:hover {
  background-color: skyblue;
  border-right: 5px solid orange;
}
.online_body_block ul li::before {
  position: absolute;
  content: "";
  width: 32px;
  height: 32px;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url("");
}

.history_body_block {
  position: relative;
  margin-top: 10px;
  /* background-color: aqua; */
}
.history_body_block ul {
  background-color: #fff;
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 150px;
  overflow-y: scroll;
}
.history_body_block ul li {
  padding: 10px;
  padding-left: 32px;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
  transition: background 1s;
}
.history_body_block ul li:hover {
  background-color: skyblue;
  border-right: 5px solid orange;
}
.history_body_block ul li::before {
  position: absolute;
  content: "";
  width: 32px;
  height: 32px;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url("");
}

.history_btn {
  background-color: rgb(255, 123, 0);
}

#search {
  padding-right: 32px;
}
.search {
  cursor: pointer;
  position: absolute;
  width: 32px;
  height: 32px;
  right: 0;
  border-left: 1px solid #e0e0e0;
  background-image: url("");
}
@media screen and (max-width: 768px) {
  .online_body {
    background-color: #fff;
  }
}
</style>
